import { Outlet, useNavigate } from "@umijs/max"

const tabList = [
  {
    label: `主应用内容`,
    key: '',
  },
  {
    label: `Umi子应用`,
    key: 'umi-micro-app',
  },
  {
    label: `Webpack子应用`,
    key: 'webpack-micro-app',
  },
  {
    label: `Ice子应用`,
    key: 'ice-micro-app',
  },
  {
    label: `Vite子应用`,
    key: 'vite-micro-app',
  },
  {
    label: `Next子应用`,
    key: 'next-micro-app',
  },
  {
    label: `Nuxt子应用`,
    key: 'nuxt-micro-app',
  },
  {
    label: `JQuery子应用`,
    key: 'jquery-micro-app',
  },
]

export default () => {
  const navigate = useNavigate()
  return <>
    {tabList.map(item => {
      return (
        <span key={item.key}>
          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-px"
            onClick={() => {
              navigate(`${item.key}`)
            }}>
            {item.label}
          </button>
        </span>
      )
    })}
    <Outlet />
  </>
}